<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:41
-->
<template>
  <div>
    <div ref="container" style="height:200px"></div>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request'
let moment = require('moment');
// 引入状态辅助函数
import {mapState} from 'vuex'
export default {
  data() {
    return {
         // 存放温度数据
         tempData: [],
      // 图表实例
      dualAxes:null
    };
  },
  computed: {
    // 映射公共数据
    ...mapState(['ed'])
  },
  watch:{
    // 监听设备变化
    async ed(){
      let res = await get('/dashboard/pageQueryData',{
        page:1,
        pageSize:50,
        engineer_id:this.ed.engineer_id,
        device_id: this.ed.device_id
      });
       res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10=113;
        arr[0].pm25=32;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.dualAxes.changeData([this.tempData, this.tempData]);
    }
  },
  methods: {
    moment,
    // 获取温度数据 
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 100,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10=113;
        arr[0].pm25=32;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      this.createLine();
      // console.log(res,'获取响应');
    },
    createLine() {
      
      const dualAxes = new DualAxes(this.$refs.container, {
  data: [this.tempData, this.tempData],
  xField: 'insert_time',
  yField: ['pm10', 'pm2.5'],
  geometryOptions: [
    {
      geometry: 'line',
      color: '#62daab',
    },
    {
      geometry: 'line',
      color: '#6395fa',
    },
  ],
});
dualAxes.render();
this.dualAxes=dualAxes
    },
  },
  mounted() {
    this.getTempData();
  },
};
</script>
<style scoped>
</style>